<template>
  <n-modal v-model:show="showModal" preset="dialog" :show-icon="false">
      <n-card v-if="editType==='edit' || editType==='add'">
        <h1 class="text-center text-4xl mb-4">{{ title }}</h1>
        <flexform ref="flexFormref" :formList="formList" :formValue="formValue"></flexform>
        <template #action>
          <div class="w-full h-10 flex justify-end items-center">
            <n-button @click="doClose">取消</n-button>
            <n-button @click="handleOK" type="primary">{{ formValue.id ? "编辑" : "创建" }}</n-button>
          </div>
        </template>
      </n-card>
    <n-card v-if="editType==='view'">
      <h1 class="text-center text-4xl mb-4">{{ title }}</h1>
      <descriptions :infoList="_lanmulist"></descriptions>
      <template #action>
        <div class="w-full h-10 flex justify-end items-center">
          <n-button @click="clickEdit" type="primary">编辑</n-button>
          <n-button @click="doClose">关闭</n-button>
        </div>
      </template>
    </n-card>
    <n-card v-if="editType==='success'">
      <n-result status="success" title="成功" :description="formValue.id?'编辑成功':'创建成功'">
      </n-result>
      <template #action>
        <div class="w-full h-10 flex justify-end items-center">
          <n-button @click="doClose">关闭</n-button>
        </div>
      </template>
    </n-card>
    <n-card v-if="editType==='error'">
      <n-result status="error" title="错误" >
        <template>
          <p>{{ errortext }}</p>
        </template>
      </n-result>
      <template #action>
        <div class="w-full h-10 flex justify-end items-center">
          <n-button @click="getreturn" type="primary">返回</n-button>
          <n-button @click="doClose">关闭</n-button>
        </div>
      </template>
    </n-card>
  </n-modal>
</template>

<script setup name="Edit">
import {useRoute, useRouter} from "vue-router";
import http from "@/request/request"

const router = useRouter()
const route = useRoute()
const flexFormref = ref(null)   // 表单组件
const showModal = ref(false)    // 模态框的显示
const title = ref("")         // 标题
const loading = ref(false)    // 加载状态
const editType = ref("add")   // 类型，编辑。新建、查看
const formValue = ref({})   // 表单数据
const errortext = ref("")   // 错误信息

const emit = defineEmits(["shuaxin"])
// 弹窗初始化
const init = (type, item = null) => {
  editType.value = type
  switch (type) {
    case "add":
      title.value = "新建"
      break;
    case "edit":
      title.value = "编辑"
      break;
    case "view":
      title.value = "详情"
      break;
  }
  if (item) {
    formValue.value = item
  }
  showModal.value = true
}
const doClose = () => {
  showModal.value = false
  emit("shauxin")
  reset()
}
const reset = () => {
  formValue.value = {}
  editType.value = ""
  title.value = ""
}
// 点击确定
const handleOK = () => {
  if (formValue.value.id) {
    flexFormref.value.jiaoyan(updatefunc)
  } else {
    flexFormref.value.jiaoyan(createfunc)
  }
}

// 创建的处理函数
const createfunc = (data) => {
  http.lanmuadd(data).then(res => {
    if (res && res.data.code === 0) {
      getsuccess()
    } else {
      getfaild()
    }
  }).catch(() => {
    getfaild()
  })
}
// 编辑的处理函数
const updatefunc = (data) => {
  http.lanmuupdate(data, formValue.value.id).then(res => {
    if (res && res.data.code === 0) {
      getsuccess()
    } else {
      getfaild(res.data.error)
    }
  }).catch((error) => {
    getfaild(error)
  })
}

// 表单配置
const formList = ref([
  {
    label: "专栏名称",
    key: "name",
    type: "input",
    rules: [{required: true, message: "请输入专栏名称", trigger: ["input", "change", "blur"]}, {
      max: 50,
      min: 2,
      message: "请输入2-50为的名称",
      trigger: ["input", "change", "blur"]
    },]
  },
])

// 交互成功
const getsuccess = () => {
  editType.value = "success"
  setTimeout(() => {
    doClose()
  }, 500)
}
// 交互失败
const getfaild = (jieguo) => {
  editType.value = "error"
  errortext.value = jieguo.toString()
}


// 显示相关的配置
const lanmulist = ref([
  {label: "栏目名字", key: "name"}
])
const _lanmulist = computed(() => {
  return lanmulist.value.map(item => {
    return {...item, value: formValue.value[item.key] || "---"}
  })
})
// 点击编辑按钮
const clickEdit = () => {
  editType.value = "edit"
  title.value = "编辑"
}
// 点击返回
const getreturn = () => {
  if (formValue.value.id) {
    editType.value = "edit"
    title.value = "编辑"
  } else {
    editType.value = "add"
    title.value = "创建"
  }
  errortext.value = ""
}
defineExpose({init, doClose, reset})
</script>

<style scoped>

</style>
